<template>
  <div class="wdb1">
    <div class="wdb2" id="chart"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import router from '@/router'
import { ref, onMounted } from 'vue'
const wordList = ref([
  { name: '侏罗纪世界3', value: 1400 },
  { name: '人生大事', value: 2400 },
  { name: '暗恋.橘生淮南', value: 700 },
  { name: '你是我的春天', value: 300 },
  { name: '坏蛋联盟', value: 100 },
  { name: '长津湖', value: 2400 }
])
const initchart = () => {
  const myChart = echarts.init(document.querySelector('#chart'))
  function eConsole(param) {
    sessionStorage.setItem('movieInfo', JSON.stringify(param.data.name))
    router.push('/movieInfo')
  }
  myChart.on('click', eConsole)
  myChart.setOption({
    series: [
      {
        type: 'wordCloud',
        gridSize: 10,
        sizeRange: [12, 30],
        rotationRange: [-45, 0, 45, 90],
        shape: 'circle',
        drawOutOfBound: false,
        textStyle: {
          color: function () {
            return (
              'rgb(' +
              Math.round(Math.random() * 255) +
              ', ' +
              Math.round(Math.random() * 255) +
              ', ' +
              Math.round(Math.random() * 255) +
              ')'
            )
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textStyle: {
              textShadowBlur: 10,
              textShadowColor: '#333'
            }
          }
        },
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        width: '200%',
        height: '200%',
        data: wordList.value
      }
    ]
  })
}

const getData = () => {
  axios
    .get('/api/suggest/getSuggestByUid' + '/' + JSON.parse(sessionStorage.getItem('uid')))
    .then((res) => {
      wordList.value = res.data
      console.log(wordList.value)
      initchart()
    })
    .catch(() => {
      ElMessage.warning('未查找到该用户！')
    })
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.wdb1 {
  width: 100%;
  height: 500px;
  background-color: azure;
}
.wdb2 {
  width: 100%;
  height: 100%;
}
</style>
